<template>
    <div class="unsettled_order">
        <div class="header_card">
            <div>待结算的订单收入：</div>
            <div class="num">
                {{ Data.waitOrderIncome || '-' }}
            </div>
        </div>

        <div class="title">
            账户收支明细
            <span>此处展示待结算订单，不包括已结算和已失效的订单</span>
        </div>

        <el-form ref="formRef" :model="form" label-width="auto" @submit.prevent>
            <el-row :gutter="24">
                <el-col :span="7">
                    <el-form-item label="订单编号" prop="orderSn">
                        <el-input v-model="form.orderSn" placeholder="输入订单编号"> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订单状态" prop="orderStatus">
                        <el-select v-model="form.orderStatus" placeholder="全部">
                            <el-option
                                v-for="item in Data.orderStatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        /></el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="来源门店" prop="shopId">
                        <el-select v-model="form.shopId" placeholder="全部">
                            <el-option label="全部" :value="0" />
                            <el-option
                                v-for="item in shopList"
                                :key="item.shopId"
                                :label="item.shopName"
                                :value="item.shopId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item prop="timeType" class="special_item" label-width="0">
                        <el-select v-model="form.timeType" class="label_select" placeholder="下单时间">
                            <el-option label="下单时间" value="createdAt" />
                            <el-option label="支付时间" value="payAt" />
                            <el-option label="收货时间" value="receivedAt" />
                        </el-select>
                        <el-date-picker
                            v-model="form.timeData"
                            type="daterange"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="0">
                        <el-button type="primary" @click="onSearch">查询</el-button>
                        <el-button plain @click="onReset">清空</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="zw-form-btns">
                    <el-button plain v-auth="'pay_account:export'" @click="onExport">导出</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 列表 -->
        <div class="table_card">
            <el-table :data="Data.list" stripe>
                <el-table-column prop="" min-width="180" fixed="left" label="订单编号">
                    <template v-slot="{ row }">
                        <span class="link" @click="viewOrderDetail(row)">{{ row.orderSn || '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatusName" width="90" label="订单状态"></el-table-column>
                <el-table-column prop="orderAmountTotal" min-width="110" label="订单实付金额">
                    <template v-slot="{ row }">
                        <span>￥{{ priceFilter(floatDivide(row.orderAmountTotal, 100) || 0) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="orderRefundTotal" min-width="100" label="已退款金额">
                    <template v-slot="{ row }">
                        <span>￥{{ priceFilter(floatDivide(row.orderRefundTotal, 100) || 0) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="splitAmount" min-width="90" label="分成">
                    <template v-slot="{ row }">
                        <span>￥{{ priceFilter(floatDivide(row.splitAmount, 100) || 0) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="settlementAmount" min-width="110" label="预计结算金额">
                    <template v-slot="{ row }">
                        <span>￥{{ priceFilter(floatDivide(row.settlementAmount, 100) || 0) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" min-width="100" label="来源门店">
                    <template v-slot="{ row }">
                        <span>{{ row.shopName || '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" width="170" label="下单时间">
                    <template v-slot="{ row }">
                        <span>{{ row.createdAt || '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="payAt" width="170" label="支付时间">
                    <template v-slot="{ row }">
                        <span>{{ row.payAt || '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="receivedAt" width="170" label="收货时间">
                    <template v-slot="{ row }">
                        <span>{{ row.receivedAt || '-' }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination_card">
            <Pagination
                :pageSize="form.perPage"
                :currentPage="form.page"
                :total="Data.total"
                @sizeChange="changeSizeHandler"
                @pageChange="changePageHandler" />
        </div>
    </div>
</template>

<script setup>
import request from '@/request';
import Pagination from '@/components/Pagination.vue';

import { floatDivide, dealObjectEmptyValue, exportExc } from '@/commons/utils';
import { reactive, ref, onMounted } from 'vue';
import { getShopListHook } from '@/hooks';
const props = defineProps({
    shopList: { type: Array, default: () => [] }
});
const form = reactive({
    page: 1,
    perPage: 10,
    shopId: 0,
    timeData: [],
    orderSn: '',
    orderStatus: '',
    timeType: 'createdAt'
});
const Data = reactive({
    orderStatusList: [
        { label: '全部', value: '' },
        { label: '拼团中', value: 6 },
        { label: '待发货', value: 2 },
        { label: '部分发货', value: 5 },
        { label: '待提货', value: 18 },
        { label: '已提货', value: 19 },
        { label: '已收货', value: 4 }
    ],
    waitOrderIncome: 0,
    total: 0,
    list: []
});

const getList = async () => {
    let params = Object.assign({}, form);
    if (form.timeData) {
        params[form.timeType] = form.timeData;
    }
    delete params.timeType;
    delete params.timeData;
    const { data } = await request('unsettledListServ', dealObjectEmptyValue(params));
    Data.list = data.list || [];
    Data.total = data.totalCount || 0;
};

// 查询
const onSearch = () => {
    form.page = 1;
    getList();
};
// 清空
const formRef = ref();
const onReset = () => {
    form.page = 1;
    form.timeData = [];
    formRef.value.resetFields();
    getList();
};

const changeSizeHandler = v => {
    form.page = 1;
    form.perPage = v;
    getList();
};

const changePageHandler = v => {
    form.page = v;
    getList();
};

const viewOrderDetail = row => {
    window.open(location.origin + `/order/list/detail?orderId=${row.id}&shopId=${row.shopId}`);
};

// 获取收入金额
const queryAmount = async () => {
    const { data } = await request('querySettlementAmountServ');
    const total = floatDivide(data?.total || 0, 100).toFixed(2);
    Data.waitOrderIncome = `￥${total}`;
};

// 导出
const onExport = () => {
    let params = Object.assign({}, form);
    if (form.timeData) {
        params[form.timeType] = form.timeData;
    }
    delete params.timeType;
    delete params.timeData;
    request('unsettledExportServ', dealObjectEmptyValue(params)).then(res => {
        exportExc(res, '待结算订单导出');
    });
};

onMounted(() => {
    getList();
    queryAmount();
});
</script>

<style lang="scss" scoped>
.unsettled_order {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    .header_card {
        display: flex;
        align-items: center;
        margin-bottom: 34px;
        .num {
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
        }
    }
    .title {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        color: #33302d;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;

        &::before {
            display: inline-block;
            width: 4px;
            height: 16px;
            margin-right: 6px;
            content: '';
            background-color: #ff6b00;
        }

        span {
            color: #969696;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 14px;
            margin-left: 8px;
        }
    }
    .special_item {
        :deep(.el-form-item__content) {
            flex-wrap: nowrap;
        }
        .label_select {
            min-width: 120px;
            width: 120px;
            margin-right: 12px;
        }
    }
    .link {
        color: #ff6b00;
        cursor: pointer;
    }
}
</style>
